<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width:800px;height:600px;"></div>
    <script>
        var idEchs = document.getElementById("main");
        var ech = echarts.init(idEchs);
        var option = {
            title:{
              text:'办公室杂项',
              left:'50%',
              textAlign:'center',
              textStyle:{
                color:'white'
              },
            },
            xAxis:{
                type:'category',
                data:['第一季度','第二季度','第三季度'],
              },
            yAxis:{
              type:'value',
            },
            series:[{
              type:'bar',
              name:'裤子',
              data:[41,85,95],
            },
            {
              type:'bar',
              name:'衬衫',
              data:[82,73,54],
            },
            {
              type:'bar',
              name:'毛衣',
              data:[85,86,98],
            },
            {
              type:'bar',
              name:'T-Shirt',
              data:[73,85,25],
            }]
        };

        //第二种 dataset
        // var option = {
        //     title:{
        //       text:'办公室杂项',
        //       left:'50%',
        //       textAlign:'center',
        //       textStyle:{
        //         color:'white'
        //       },
        //     },
        //     xAxis:{
        //         type:'category',
        //         data:['第一季度','第二季度','第三季度'],
        //       },
        //     yAxis:{
        //       type:'value',
        //     },
        //     dataset:{
        //       source:[
        //           ['product', '裤子', '衬衫', '毛衣','T_Shirt'],
        //           ['第一季度', 43.3, 85.8, 93.7,23],
        //           ['第二季度', 83.1, 73.4, 55.1,35],
        //           ['第三季度', 86.4, 65.2, 82.5,56],
        //       ],
        //     },
        //     series:[{
        //       type:'bar',
        //     },
        //     {
        //       type:'bar',
        //     },
        //     {
        //       type:'bar',
        //     },
        //     {
        //       type:'bar',
        //     }]
        // };
        
        //第三种
        var option = {
            legend:{},
            xAxis:{
                type:'category',
              },
            yAxis:{
              type:'value',
            },
            dataset:{
              dimensions:['product', '裤子', '衬衫', '毛衣','T-Shirt'],
              source:[
                  {product:'第一季度', '裤子':43.3, '衬衫':85.8, '毛衣':93.7,"T-Shirt":23},
                  {product:'第二季度', '裤子':83.1, '衬衫':73.4, '毛衣':55.1,"T-Shirt":35},
                  {product:'第三季度', '裤子':86.4, '衬衫':65.2, '毛衣':82.5,"T-Shirt":55},
              ],
            },
            series:[{
              type:'bar',
            },
            {
              type:'bar',
            },
            {
              type:'bar',
            },
            {
              type:'bar',
            }]
        };


        ech.setOption(option);
    </script>
</body>
</html>